<template>
	<view class="box">
		<!-- <view class=""> -->
		<!-- indicator-pos="bottomRight" -->
		<u-swiper height='700rpx' circular='true' :list="list" @change="e => currentNum = e.current" :autoplay="false"
			indicatorStyle="right: 20px">
			<view slot="indicator" class="indicator-num">
				<text class="indicator-num__text">{{ currentNum + 1 }}/{{ list.length }}</text>
			</view>
		</u-swiper>
		<!-- </view> -->
		<view class="title-price">
			<view>
				<span class="title">￥0.1 </span>
				<span class="price">原价￥99</span>
			</view>
			<view class="share" @click="show = true">
				<u-icon name='share' class="icon"></u-icon>
				<span>分享</span>
			</view>

		</view>
		<!-- 弹出层 -->
		<u-popup :show="show" @close="close">
			<view class="popup">
				<span class="fx">分享至</span>
				<view v-for="item in wx">
					<img :src="item.a" alt="" class="popupimg" />
				</view>
			</view>
		</u-popup>
		<view class="written">
			羊羔毛外套女秋冬2021年新款翻领皮毛一体加厚工装机车服
		</view>
		<view class="sale">
			销售量:1
			<span>浏览量:33</span>
		</view>
		<view class="discount">
			<span style="color: gray;">优惠</span>
			<span class="rollup">领券</span>
			<span style="float: right;"><u-icon name='arrow-right'></u-icon></span>
		</view>
		<view class="discount">
			<span style="color: gray;">运费 </span>
			<span style="margin-left: 20rpx;">￥0.00</span>
		</view>
		<view class="discount">
			<span style="color: gray;">已选</span>
			<span style="margin-left: 20rpx;">默认</span>
			<span style="float: right;"><u-icon name='arrow-right'></u-icon></span>
		</view>
		<view class="discount">
			<span>用户评价</span>
			<span class="reviews">好评率0%</span>
			<span style="float: right;"><u-icon name='arrow-right'></u-icon></span>
		</view>
		<u-divider text="分割线" :dot="true"></u-divider>
		<view class="pj">暂无评价~</view>
		<u-divider text="猜你喜欢" lineColor='gray' textColor='black' textSize='40rpx'></u-divider>
		<view v-for="item in love" style="float: left;">
			<img :src="item.img" alt="" style="width: 240rpx;height:240rpx; " />
			<view style="font-size: 30rpx;">{{item.q}}</view>
			<view class="">
				<span style="color: red;">{{item.w}}</span>
				<span class="loveprice">{{item.e}}</span>
			</view>

		</view>
		<view class="shopxq">
			商品详情
		</view>
		<view v-for="item in pz">
			<img :src="item.url" alt="" class="pzimg" />
		</view>
		<!-- 底部导航栏 -->
		<view class="bottom-navigation" style="">

			<view v-for="item in Data" class="data">
				<view>
					<view style="margin-left: 10rpx;">
						<u-icon style="text-align: center;" :name='item.q' size='50rpx'></u-icon>
					</view>
					<view>{{item.w}}</view>
				</view>
			</view>

			<view class="buy">

				<view class="shop">加入购物车</view>
				<view class="ljshop">立即购买</view>
			</view>

		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				Data: [{
						q: 'kefu-ermai',
						w: '客服'
					},
					{
						q: 'star',
						w: '收藏'
					},
					{
						q: 'shopping-cart',
						w: '购物车'
					}
				],
				currentNum: null,
				wx: [{
					a: '../../static/weixin.png'
				}],
				show: false,
				pz: [{
						url: '../../static/pinzhi.png'
					},
					{
						url: '../../static/hanrong.png'
					},
					{
						url: '../../static/baogao.png'
					}
				],
				love: [{
						img: '../../static/qun.png',
						q: '羊羔毛皮毛一体...',
						w: '￥0.1',
						e: '￥128'
					},
					{
						img: '../../static/qun.png',
						q: 'DIDDI原创设计...',
						w: '￥0.1',
						e: '￥99'
					},
					{
						img: '../../static/qun.png',
						q: '大码女装减龄显',
						w: '￥0.1',
						e: '￥199'
					}
				],
				//导航栏
				value1: 0,
				list: [
					'https://m.360buyimg.com/babel/jfs/t1/223665/12/32010/184410/6678d21cF16815602/63ef50e95f61df15.jpg',
					'https://m.360buyimg.com/babel/jfs/t1/151453/6/46038/112616/668e3b09Fbad3d5b8/ea4d2a897ad32756.jpg',
					'https://m.360buyimg.com/babel/jfs/t1/223665/12/32010/184410/6678d21cF16815602/63ef50e95f61df15.jpg'
				]
			}
		},
		methods: {
			close() {
				this.show = false
				// console.log('close');
			}
		}
	}
</script>

<style lang="scss">
	.popupimg {
		width: 200rpx;
		height: 200rpx;
	}

	.buy {
		display: flex;
		justify-content: space-between;
	}

	.data {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.reviews {
		margin-left: 20rpx;
		color: red;
		font-size: 25rpx;
	}

	.popup {
		height: 500rpx;
	}

	.bottom-navigation {
		width: 100%;
		height: 120rpx;
		background-color: #FFFFFF;
		position: fixed;
		left: 0rpx;
		bottom: 0rpx;
		z-index: 10;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0rpx 20rpx;
		box-sizing: border-box;
	}

	.sale {
		margin-top: 10rpx;
		display: flex;
		justify-content: space-between;
		color: gray;
		font-size: 25rpx;
	}

	.box {
		margin-left: 15rpx;
		margin-right: 15rpx;
	}

	.title-price {
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
	}

	.title {
		color: red;
		font-size: 45rpx;
	}

	.price {
		color: gray;
		text-decoration: line-through;
		font-size: 25rpx;
		margin-left: 10rpx;
	}

	.icon {
		float: left;
	}

	.share {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100rpx;
		height: 60rpx;
		background-color: #F6F6F6;
		padding-left: 30rpx;
		border-radius: 20rpx;
	}

	.written {
		margin-top: 30rpx;
		font-size: 38rpx;
	}

	.rollup {
		padding-left: 15rpx;
		padding-bottom: 6rpx;
		padding-right: 15rpx;
		margin-right: 50rpx;
		border: 1rpx solid red;
		color: red;
		border-radius: 10rpx;
		font-size: 25rpx;
	}

	.discount {
		margin-top: 40rpx;
	}

	.shop {
		border: 1px solid red;
		color: red;
		border-radius: 70rpx;
		padding: 20rpx 45rpx 20rpx 40rpx;
		text-align: center;
		margin-right: 20rpx;
	}

	.ljshop {
		border: 1px solid red;
		color: white;
		background-color: red;
		border-radius: 70rpx;
		padding: 20rpx 45rpx 20rpx 40rpx;
		text-align: center;
	}

	.pj {
		text-align: center;
		color: gray;
		margin-top: 20rpx;
		font-size: 28rpx;
		margin-bottom: 80rpx;
	}

	.loveprice {
		text-decoration: line-through;
		color: gray;
		font-size: 25rpx;
	}

	.shopxq {
		text-align: center;
		margin-top: 400rpx;
		color: gray;
	}

	.pzimg {
		width: 100%;
		height: 700rpx;
		margin-top: 50rpx;
	}

	.fx {
		/* text-align: center; */
		font-size: 40rpx;
		margin-left: 330rpx;
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}
</style>